<template>
  <view class="number-keyboard">
    <!-- 金额显示区域 -->
    <view class="amount-display flex items-center justify-end border-l-2 border-red-500 bg-[#e5e8ef] px-3 py-2">
      <view class="mr-8 flex items-center">
        <text class="mr-2 text-base text-gray-600">
          {{ actualText }}(元)
        </text>
        <text class="text-lg text-black font-medium">
          {{ actualAmount }}
        </text>
      </view>
      <view v-if="showDebtButton" class="flex items-center">
        <text class="mr-2 text-base text-gray-600">
          {{ debtText }}(元)
        </text>
        <text class="text-lg text-orange-500 font-medium">
          {{ debtAmount }}
        </text>
      </view>
    </view>

    <!-- 数字键盘 -->
    <view class="number-keyboard-body bg-[#e5e8ef] px-2 pb-2">
      <view class="grid grid-cols-4 gap-1.5" style="grid-template-rows: repeat(4, 1fr);">
        <!-- 第一行 -->
        <view
          class="key-btn h-14 flex items-center justify-center border-b-2 border-slate-800 rounded-sm bg-slate-700 text-2xl text-white font-medium shadow active:translate-y-0.5 active:border-b-0"
          @click="handleKeyPress('7')"
        >
          7
        </view>
        <view
          class="key-btn h-14 flex items-center justify-center border-b-2 border-slate-800 rounded-sm bg-slate-700 text-2xl text-white font-medium shadow active:translate-y-0.5 active:border-b-0"
          @click="handleKeyPress('8')"
        >
          8
        </view>
        <view
          class="key-btn h-14 flex items-center justify-center border-b-2 border-slate-800 rounded-sm bg-slate-700 text-2xl text-white font-medium shadow active:translate-y-0.5 active:border-b-0"
          @click="handleKeyPress('9')"
        >
          9
        </view>
        <view
          class="key-btn h-14 flex items-center justify-center border-b-2 border-gray-400 rounded-sm bg-gray-300 text-2xl text-black font-medium shadow active:translate-y-0.5 active:border-b-0"
          @click="handleClear()"
        >
          AC
        </view>

        <!-- 第二行 -->
        <view
          class="key-btn h-14 flex items-center justify-center border-b-2 border-slate-800 rounded-sm bg-slate-700 text-2xl text-white font-medium shadow active:translate-y-0.5 active:border-b-0"
          @click="handleKeyPress('4')"
        >
          4
        </view>
        <view
          class="key-btn h-14 flex items-center justify-center border-b-2 border-slate-800 rounded-sm bg-slate-700 text-2xl text-white font-medium shadow active:translate-y-0.5 active:border-b-0"
          @click="handleKeyPress('5')"
        >
          5
        </view>
        <view
          class="key-btn h-14 flex items-center justify-center border-b-2 border-slate-800 rounded-sm bg-slate-700 text-2xl text-white font-medium shadow active:translate-y-0.5 active:border-b-0"
          @click="handleKeyPress('6')"
        >
          6
        </view>

        <!-- 第三行 -->
        <view
          class="key-btn h-14 flex items-center justify-center border-b-2 border-slate-800 rounded-sm bg-slate-700 text-2xl text-white font-medium shadow active:translate-y-0.5 active:border-b-0"
          @click="handleKeyPress('1')"
        >
          1
        </view>
        <view
          class="key-btn h-14 flex items-center justify-center border-b-2 border-slate-800 rounded-sm bg-slate-700 text-2xl text-white font-medium shadow active:translate-y-0.5 active:border-b-0"
          @click="handleKeyPress('2')"
        >
          2
        </view>
        <view
          class="key-btn h-14 flex items-center justify-center border-b-2 border-slate-800 rounded-sm bg-slate-700 text-2xl text-white font-medium shadow active:translate-y-0.5 active:border-b-0"
          @click="handleKeyPress('3')"
        >
          3
        </view>

        <!-- 跨两行的收银按钮，只渲染一次 -->
        <view
          v-if="!showDebtButton"
          class="key-btn row-span-3 flex items-center justify-center border-b-2 border-green-600 rounded-sm bg-green-500 text-2xl text-white font-medium shadow active:translate-y-0.5 active:border-b-0"
          style="grid-row: 2 / span 3; grid-column: 4;" @click="handleCheckout()"
        >
          {{ confirmButtonText }}
        </view>
        <!-- 如果有赊账按钮，显示赊账和收银按钮组合 -->
        <template v-else>
          <view
            class="key-btn h-14 flex items-center justify-center border-b-2 border-orange-500 rounded-sm bg-orange-400 text-lg text-white font-medium shadow active:translate-y-0.5 active:border-b-0"
            style="grid-column: 4; grid-row: 2;" @click="handleDebt()"
          >
            {{ debtButtonText }}
          </view>
          <view
            class="key-btn row-span-2 h-29 flex items-center justify-center border-b-2 border-green-600 rounded-sm bg-green-500 text-lg text-white font-medium shadow active:translate-y-0.5 active:border-b-0"
            style="grid-column: 4; grid-row: 3 / span 2;" @click="handleCheckout()"
          >
            收银
          </view>
        </template>

        <!-- 第四行 -->
        <view
          class="key-btn h-14 flex items-center justify-center border-b-2 border-slate-800 rounded-sm bg-slate-700 text-2xl text-white font-medium shadow active:translate-y-0.5 active:border-b-0"
          @click="handleKeyPress('0')"
        >
          0
        </view>
        <view
          class="key-btn h-14 flex items-center justify-center border-b-2 border-slate-800 rounded-sm bg-slate-700 text-2xl text-white font-medium shadow active:translate-y-0.5 active:border-b-0"
          @click="handleKeyPress('.')"
        >
          .
        </view>
        <view
          class="key-btn h-14 flex items-center justify-center border-b-2 border-slate-800 rounded-sm bg-slate-700 text-2xl text-white shadow active:translate-y-0.5 active:border-b-0"
          @click="handleDelete()"
        >
          <text class="text-white">
            ←
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineEmits, defineProps } from 'vue';

// 定义组件属性
const props = defineProps({
  // 显示金额
  actualAmount: {
    type: [Number, String],
    default: 0,
  },
  // 欠款金额
  debtAmount: {
    type: [Number, String],
    default: 0,
  },
  // 实收文本
  actualText: {
    type: String,
    default: '实收',
  },
  // 欠款文本
  debtText: {
    type: String,
    default: '下欠',
  },
  // 确认按钮文本
  confirmButtonText: {
    type: String,
    default: '收银',
  },
  // 赊账按钮文本
  debtButtonText: {
    type: String,
    default: '整单赊账',
  },
  // 最大小数位数
  maxDecimalLength: {
    type: Number,
    default: 2,
  },
  // 是否显示整单赊账按钮
  showDebtButton: {
    type: Boolean,
    default: true,
  },
});

// 定义事件
const emit = defineEmits([
  'key-press', // 按键按下
  'delete', // 删除操作
  'clear', // 清除操作
  'debt', // 赊账操作
  'checkout', // 确认收银
]);

// 处理数字键盘按键
const handleKeyPress = (key: string) => {
  emit('key-press', key);
};

// 处理删除键
const handleDelete = () => {
  emit('delete');
};

// 处理清除键
const handleClear = () => {
  emit('clear');
};

// 处理整单赊账
const handleDebt = () => {
  emit('debt', 2);
};

// 处理收银按钮
const handleCheckout = () => {
  emit('checkout', 1); // 默认传递状态 1，表示正常收银
};
</script>

<style scoped lang="scss">
.number-keyboard {
    width: 100%;
}

.key-btn {
    user-select: none;
}
</style>
